<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=th"></script>
<style type="text/css">  
/* css กำหนดความกว้าง ความสูงของแผนที่ */  
#map_canvas {   
    height:500px;  
    margin:auto; margin-left:20px; margin-right:20px;
/*  margin-top:100px;*/  
}  
</style>
<div id="page-wrapper">
            <div class="row">
            <img src="<?php echo base_url() ?>bootstrap/tot/bnnr-eservice1.jpg" class="img-responsive" alt="Responsive image">
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            ข้อมูลจุดเชื่อมต่อ PON 
                        </div>
                        <div class="row">
                          
                            <div class="panel-body">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#profile" data-toggle="tab">ข้อมูลทั่วไป</a>
                                </li>
                                <li><a href="#map" data-toggle="tab">ข้อมูลแผนที่</a>
                                </li>
                            </ul>
                              <!-- Tab panes -->
                             <form class="form-horizontal" role="form" method="post" action="<?php echo base_url();?>index.php/admin/node/add">
                             <br/>
                            <div class="tab-content">
                            <div class="tab-pane fade in active" id="profile">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-2 control-label">PON ID</label>
                                            <div class="col-xs-3 col-md4">
                                                <input type="text" class="form-control" name="node_id" placeholder="PON ID">
                                            </div>
                                                <label for="inputPassword3" class="col-sm-2 control-label">ชื่อ</label>
                                            <div class="col-xs-4 col-md4">
                                                <input type="text" class="form-control" name="node_name" placeholder="ชื่อ PON">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">ODF</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_ODF" placeholder="ODF PON">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">OLT</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_OLT" placeholder="OLT PON">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">Shelf</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_shelf" placeholder="Shelf PON">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">Slot</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_slot" placeholder="Slot PON">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">ที่อยู่</label>
                                            <div class="col-sm-3">
                                                <textarea class="form-control" name="node_addr" placeholder="ที่ตั้ง PON"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">IP Address (IPv4)</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_IP" placeholder="PON IP ADDR.">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">VLAN ID</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_vlan_id" placeholder="VLAN ID">
                                            </div>
                                        </div>
                                         <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">รายละเอียด</label>
                                            <div class="col-sm-3">
                                                <input type="text" class="form-control" name="node_commend" placeholder="commend">
                                            </div>
                                        </div>     
                                       
                                </div> <!--tab pane-->
                                        <div class="tab-pane fade" id="map">
                                            <div class="form-group">
                                                <label for="inputPassword3" class="col-sm-2 control-label">latitude</label>
                                            <div class="col-lg-4">
                                                <input type="text" class="form-control" id="latitude" name="node_latitude" placeholder="latitude" disabled>
                                            </div>
                                        </div>   
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">longtitude</label>
                                            <div class="col-lg-4">
                                                <input type="text" class="form-control" id="longtitude" name="node_longtitude" placeholder="longtitude" disabled>
                                            </div>
                                        </div> 
                                        <div id="map_canvas"></div> </br>
                                    </div> 
                            </div> <!-- tab content -->                                
                                      
                                      <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                          <button type="submit" class="btn btn-primary">บันทึกข้อมูล</button>
                                        </div>
                                      </div>
                                      
                                </form>
                            </div><!-- /.row -->
                        </div><!--panel body-->
                    </div><!--panel primary-->     
                </div><!---clo-lg-12--> 
            </div><!--row-->
</div>      <!-- /#page-wrapper -->

<script type="text/javascript">  
var map;
var GGM;
var my_Marker;

function initialize() {
    GGM=new Object(google.maps); 
	infoWindow = new google.maps.InfoWindow();
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
	
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 10, 
        center: my_Latlng,
        mapTypeId: GGM.MapTypeId.HYBRID 
    };  
    map = new GGM.Map(my_DivObj,myOptions);
      
    my_Marker = new GGM.Marker({ 
        position: my_Latlng, 
        map: map,
        draggable:true, 
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!"
    });  

    GGM.event.addListener(my_Marker, 'dragend', function() {  
        var my_Point = my_Marker.getPosition(); 
        map.panTo(my_Point);   
        $("#latitude").val(my_Point.lat());   
        $("#longtitude").val(my_Point.lng());  
    });       
 
}  

google.maps.event.addDomListener(window, 'load', initialize);

$(function(){
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		google.maps.event.trigger(map, "resize");
		map.setCenter(my_Marker.getPosition());
	});
});


</script>    